import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import "./extension/extension-dot";
import MenuBar from "./menu-bar";
import styles from "./style.less";
import { Dot } from "./extension/extension-dot";
import { Wavy } from "./extension/extension-wavy";
import { Formula } from "./extension/extension-formula";
import FormulaModal from "./formula-modal";
import { useRef, useImperativeHandle, forwardRef } from "react";
const Teditor = (props, ref) => {
  const editorContentRef = useRef<any>(null);
  const formulaModalRef = useRef<any>(null);

  const editor = useEditor({
    autofocus: "end",
    editable: true,
    extensions: [StarterKit, Dot, Wavy, Formula],
    content: ``
  });

  useImperativeHandle(ref, () => {
    return {
      editor,
    };
  });

  return (
    <div className={styles.editor}>
      {editor && <>
        <MenuBar editor={editor} />
        <FormulaModal ref={formulaModalRef} editor={editor} />
      </>}
      <EditorContent
        ref={editorContentRef}
        editor={editor}
        className={styles.content}
      />
    </div>
  );
};

export default forwardRef(Teditor);
